<template>
	<view class="picker-box gui-flex gui-space-between">
		<text class="gui-order-btn gui-border" :class="{'btn-disabled':prevDisabled == true}"
			@click="handleClickPrev" hover-class="gui-tap">前一天</text>
		<view class="picker-text">

			<uni-datetime-picker :type="type" v-model="currentData" :start="startDate" :end="endDate" @change="change" @show="show">
				<slot>
					<view><text class="gui-color-gray datetime-picker-title">{{ title }}</text></view><text
						:style="titleStyle">{{ singleStr }}</text><text
						class="gui-icons gui-color-gray">&#xe661;</text>
				</slot>
			</uni-datetime-picker>
		</view>
		<text class="gui-order-btn gui-border" :class="{'btn-disabled':nextDisabled == true}"
			@click="handleClickNext" hover-class="gui-tap">后一天</text>

	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
				default: 'date'
			},
			currentDate: {
				type: String,
				default: ''
			},
			start: {
				type: String,
				default: ''
			},
			end: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: '提货日期'
			},
			titleStyle: {
				type: String,
				default: 'font-size:26rpx'
			},
			
		},
		data() {
			return {
				prevDisabled: false,
				nextDisabled: false,
				currentData: '',
				singleStr:'',
				startDate:'',
				endDate:''
			}
		},
		watch:{
			start(value){
				console.log(value)
				this.startDate = value
			},
			end(value){
				console.log(value)
				this.endDate = value
			}
		},
		mounted() {
			this.startDate = this.start || '';
			this.endDate = this.end || ''
			this.singleStr = this.currentDate ? this.$dayjs(this.currentDate).format('MM月DD日') :  this.$dayjs().format('MM月DD日');
			this.currentData = this.currentDate || this.$dayjs().format('YYYY-MM-DD');
			this.setButtonStartStatus();
			this.setButtonEndStatus();
		},
		methods: {
			setButtonStartStatus(date) {
				console.log(date)
				let d = date || this.currentData
				if (this.start) {
					if (d <= this.start) {
						this.prevDisabled = true;
						return true;
					} else {
						this.prevDisabled = false;
						return false
					}
				}

			},
			setButtonEndStatus(date) {
				let d = date || this.currentData
				if (this.end) {
					if (d >= this.end) {
						this.nextDisabled = true;
						return true
					} else {
						this.nextDisabled = false;
						return false
					}
				}

			},
			getDate(n) {
				if(n === 1){
					return this.$dayjs(this.currentData).add(1, 'day').format('YYYY-MM-DD')
				}else{
					return this.$dayjs(this.currentData).subtract(1, 'day').format('YYYY-MM-DD')
				}
				
			},
			handleClickPrev() {
				if (this.prevDisabled) {
					return false;
				}
				let date = this.getDate(-1);
				this.setSingle(date)
				this.setButtonEndStatus(date);
				this.setButtonStartStatus(date);
				this.$emit('change', date)
			},
			handleClickNext() {
				if (this.nextDisabled) {
					return false;
				}
				let date = this.getDate(1);
				this.setSingle(date)
				this.setButtonStartStatus(date);
				this.setButtonEndStatus(date);
				this.$emit('change', date)
			},
			show(){
				this.$emit('show')
			},
			change(e) {
				console.log(e)
				this.setButtonStartStatus(e);
				this.setButtonEndStatus(e);
				this.setSingle(e);
				this.$emit('change', e)
			},
			setSingle(e){
				this.singleStr = this.$dayjs(e).format('MM月DD日');
				this.currentData = this.$dayjs(e).format('YYYY-MM-DD');
			}
		}
	}
</script>

<style scoped lang="scss">
	.picker-box {
		background-color: #fff !important;
		padding: 10rpx 0 !important;
	}

	.gui-order-btn {
		margin-right: 24rpx;
		margin-top: 10rpx
	}

	.picker-text {
		text-align: center;
	}

	.btn-disabled {
		background-color: #f4f4f4 !important;
	}

	.gui-tap{
		background-color: #000;
	}
	.datetime-picker-title{
		font-size:26rpx;
	}
</style>